<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <img src="./living.png" alt="">
    <title>生命周期</title>
</head>

<body>
    <div id="root">
        <h1 :style="{opacity:opacity}">欢迎学习VUE</h1>
        <!-- <button @click="change">点击切换</button> -->
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            opacity: 1,
        },
        methods: {
            // change() {
            //     setInterval(() => {
            //         this.opacity -= 0.01
            //         if (this.opacity <= 0) this.opacity = 1
            //     }, 16)
            // }


        },
        //vue完成模板解析并把真实的页面dom元素放入页面后调用
        // 挂载完毕
        mounted() {
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        }

    })
    //通过外部定时器实现
    // setInterval(() => {
    //     vm.opacity -= 0.01
    //     if (vm.opacity <= 0) vm.opacity = 1
    // }, 16)

</script>

</html>